<script>
// 显示echarts饼图，展示已经提现金额与未提现金额
import {isWeChatBrowser} from "@/utils/client";
import {getWithdrawal} from "@/api/distribute";
import empty from "@/assets/empty2.png";



export default {
    name: "DistributionDetail",


    data() {
        return {
            chart: null,
            fetchPromise:null,
            response:null,
            empty
        };
    },
    created() {
        this.fetchPromise=getWithdrawal()
    },
    mounted() {

        if(this.fetchPromise!==null){
            this.fetchPromise.then(res=>{

                this.response=res;
                if(res===null) return;
                this.chart=this.$echarts.init(this.$refs.chart);
                this.chart.setOption( {
                    title: {
                        text: "分佣金额统计",
                        // subtext: "Fake Data",
                        left: "center"
                    },
                    tooltip: {
                        trigger: "item",
                        // {a} <br/>
                        formatter: "{b} : {c} ({d}%)"
                    },
                    legend: {
                        bottom: 10,
                        left: "center",
                        data: ["可提现金额", "已提现金额"]
                    },
                    series: [
                        {
                            type: "pie",
                            radius: "65%",
                            center: ["50%", "50%"],
                            selectedMode: "single",
                            data: [
                                {
                                    value: res.canTransfer,
                                    name: "可提现金额",
                                    label: {
                                        // formatter: [
                                        //     "{title|{b}}{abg|}",
                                        //     "  {weatherHead|金额类型}{valueHead|金额}{rateHead|比例}",
                                        //     "{hr|}",
                                        //     "  {Sunny|}{value|可提现}{rate|55.3%}",
                                        //     "  {Cloudy|}{value|已提现}{rate|38.9%}",
                                        // ].join("\n"),
                                        backgroundColor: "#eee",
                                        // borderColor: "#777",
                                        // borderWidth: 1,
                                        // borderRadius: 4,
                                        // rich: {
                                        //     title: {
                                        //         color: "#eee",
                                        //         align: "center"
                                        //     },
                                        //     abg: {
                                        //         backgroundColor: "#333",
                                        //         width: "100%",
                                        //         align: "right",
                                        //         height: 25,
                                        //         borderRadius: [4, 4, 0, 0]
                                        //     },
                                        //     Sunny: {
                                        //         height: 30,
                                        //         align: "left",
                                        //         text:"111"
                                        //         // backgroundColor: {
                                        //         //     image: weatherIcons.Sunny
                                        //         // }
                                        //     },
                                        //     Cloudy: {
                                        //         height: 30,
                                        //         align: "left",
                                        //         // backgroundColor: {
                                        //         //     image: weatherIcons.Cloudy
                                        //         // }
                                        //     },
                                        //     Showers: {
                                        //         height: 30,
                                        //         align: "left",
                                        //         // backgroundColor: {
                                        //         //     image: weatherIcons.Showers
                                        //         // }
                                        //     },
                                        //     weatherHead: {
                                        //         color: "#333",
                                        //         height: 24,
                                        //         align: "left"
                                        //     },
                                        //     hr: {
                                        //         borderColor: "#777",
                                        //         width: "100%",
                                        //         borderWidth: 0.5,
                                        //         height: 0
                                        //     },
                                        //     value: {
                                        //         width: 20,
                                        //         padding: [0, 20, 0, 30],
                                        //         align: "left"
                                        //     },
                                        //     valueHead: {
                                        //         color: "#333",
                                        //         width: 20,
                                        //         padding: [0, 20, 0, 30],
                                        //         align: "center"
                                        //     },
                                        //     rate: {
                                        //         width: 40,
                                        //         align: "right",
                                        //         padding: [0, 10, 0, 0]
                                        //     },
                                        //     rateHead: {
                                        //         color: "#333",
                                        //         width: 40,
                                        //         align: "center",
                                        //         padding: [0, 10, 0, 0]
                                        //     }
                                        // }
                                    }
                                },
                                { value: res.isTransferred, name: "已提现金额" },
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: "rgba(0, 0, 0, 0.5)"
                                }
                            }
                        }
                    ]
                })
            })
        }
    },
    methods:{
        // 获取可提现金额与已提现金额
        getData(){

        },
        getMoney(){
            if(!isWeChatBrowser()){
                this.$message.error("请使用微信浏览器打开")
            }else{
                this.$router.push("/distribution/weixin")
            }
        },
        open(){
            const h = this.$createElement;
            this.$notify({
                title: "佣金统计",
                message: h("i", { style: "color: red"}, "佣金在每日凌晨0点及12点统计一次")
            });
        }
    }
}
</script>

<template>
<div class="distribute-detail-page">
    <div>
        <el-button v-if="response!=null" @click="getMoney">前往提现</el-button>
        <el-button type="text" @click="open">注意</el-button>
    </div>

    <div>
        <div  ref="chart" style="width: 100%;height: 300px">

        </div>
        <div v-show="response==null" class="empty">
            <!--suppress VueMissingComponentImportInspection -->
            <img :src="empty" alt=""/>
        </div>
    </div>
</div>
</template>

<style scoped lang="scss">
    .empty{
             text-align: center;
         }
    .distribute-detail-page{
        padding: 20px;
    }
</style>
